<template>
	<view class="vw100 minh100vh bgfff">
		<tm-tabs @change="tabschange" color="#1a1a1c" activeFontColor="#bc8c1e" tabs-line-ani-color="#bc8c1e" showTabsLineAni :list="tabsTitle" rang-key="order_name" :item-width="180" :width="750" default-name="2"></tm-tabs>
		<view class="w-per100 bgfff px30 py20 row a-center">
			<view class="flex1">
				<view class="ft30">
					物流公司：{{tabsTitle[step].name}}
				</view>
				<view class="mt32 ft28">
					快递单号：{{tabsTitle[step].no}}
				</view>
			</view>
		</view>
		
		<view class="mt20 w-per100 bgfff p30 ft28">
			<view class="pb30 borb-F1F1F1 ft30">
				物流信息
			</view>
			<view class="w-per100 mt30">
				<tm-timeline>
					<tm-timeline-item color="#bc8c1e" :size="32" type="" icon="tmicon-check" :time="item.time" v-for="(item,index) in tabsTitle[step].data" :key="index">
						<tm-sheet no-level :shadow="2" :round="3" :margin="[0, 10]">
							<tm-text
							color="#bc8c1e"
								:label="item.context"
							></tm-text>
						</tm-sheet>
					</tm-timeline-item>
				</tm-timeline>
			</view>
		</view>
		
	</view>
</template>

<script>
import {logisticsInfo} from '@/utils/api'
	export default {
		data() {
			return {
				id:'',
				stepList:[],
				step:0,
				image:'',
				logistics_no:'',
				logistics_name:'',
				tabsTitle :[]
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.getOrderDetail();
		},
		methods: {
			// 获取数据
			// 获取详情
			async getOrderDetail(){
				let obj = {
					id:this.id,
				}
				console.log('obj',obj);
				let res = await logisticsInfo(obj);
				if (res.code == 1) {
					console.log('data', res.data);
					this.tabsTitle = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			tabschange(e){
				console.log(e)
				this.step = e
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f6f6f6;
	}
	::v-deep .u-steps-item--column{
		padding-bottom: 50rpx !important;
	}
	::v-deep .u-steps-item__line{
		height: 134rpx !important;
		background-color: #D9D9D9 !important;
	}
	::v-deep .u-steps-item:first-of-type .u-steps-item__wrapper__dot{
		width: 10rpx !important;
		height: 10rpx !important;
		background: #208BFF !important;
		border: 10rpx solid rgba(32, 139, 255,0.3) !important;
		border-radius: 100% !important;
	}
	::v-deep .u-steps-item:not(:first-of-type) .u-steps-item__wrapper__dot{
		width: 12rpx !important;
		height: 12rpx !important;
		border-radius: 100% !important;
		border: 2rpx solid #999999 !important;
		background-color: transparent !important;
	}
	// .col-1gge{
	// 	color: #bc8c1e;
	// }
</style>
